'use client'
import React, { useState } from 'react'
import MyPlatSelect from '../component/my-plat-select'
import classNames from 'classnames'
import { Check } from 'lucide-react'

const page = () => {
  const [value1, setValue1] = useState<string | undefined>()
  const [value2, setValue2] = useState<string[] | undefined>([])
  const [value3, setValue3] = useState<number | undefined>()
  const [value4, setValue4] = useState<number[] | undefined>([])
  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ]
  const options2 = [
    { label: 'Option 1', value: 1 },
    { label: 'Option 2', value: 2 },
    { label: 'Option 3', value: 3 },
  ]
  return (
    <div className='max-w-[800px] mx-auto'>
      <h2 className='text-[18px] font-bold'>默认string类型</h2>
      <ul className='flex gap-10'>
        <section>
          value: {JSON.stringify(value1)}
          <MyPlatSelect options={options} value={value1} onChange={setValue1} />
        </section>
        <section>
          value: {JSON.stringify(value2)}
          <MyPlatSelect options={options} multiple value={value2} onChange={setValue2} />
        </section>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[18px] font-bold'>number类型</h2>
      <ul className='flex gap-10'>
        <section>
          value: {JSON.stringify(value3)}
          <MyPlatSelect options={options2} value={value3} onChange={setValue3} />
        </section>
        <section>
          value: {JSON.stringify(value4)}
          <MyPlatSelect options={options2} multiple value={value4} onChange={setValue4} />
        </section>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[18px] font-bold'>自定义样式</h2>
      active的bg-color和hover的bg-color不能修改
      <ul className='flex gap-10'>
        <section>
          value: {JSON.stringify(value3)}
          <MyPlatSelect options={options2} value={value3} onChange={setValue3} className={classNames('bg-black/20 !rounded-full')} />
        </section>
        <section>
          value: {JSON.stringify(value4)}
          <MyPlatSelect options={options2} multiple value={value4} onChange={setValue4} className={classNames('bg-black/20 !rounded-full')} />
        </section>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[18px] font-bold'>optionPrefix</h2>
      <ul className='flex gap-10'>
        <section>
          value: {JSON.stringify(value3)}
          <MyPlatSelect options={options2} optionPrefix={<Check className='w-4 h-4' />} value={value3} onChange={setValue3} className={classNames('bg-black/20 !rounded-full')} />
        </section>
        <section>
          value: {JSON.stringify(value4)}
          <MyPlatSelect options={options2} optionPrefix={<Check className='w-4 h-4' />} multiple value={value4} onChange={setValue4} className={classNames('bg-black/20 !rounded-full')} />
        </section>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-[18px] font-bold'>optionSuffix</h2>
      <ul className='flex gap-10'>
        <section>
          value: {JSON.stringify(value3)}
          <MyPlatSelect options={options2} optionSuffix={'.com'} value={value3} onChange={setValue3} className={classNames('bg-black/20 !rounded-full')} />
        </section>
        <section>
          value: {JSON.stringify(value4)}
          <MyPlatSelect options={options2} optionSuffix={'.com'} multiple value={value4} onChange={setValue4} className={classNames('bg-black/20 !rounded-full')} />
        </section>
      </ul>
      <br />
      <br />
      <hr />
    </div>
  )
}

export default page